ホームに戻る
出典 :
TabControl クラス (System.Windows.Controls) | Microsoft Learn WPF4.5入門 その37 「TabControl」 - かずきのBlog@hatena [WPF, XAML] TabControl でWebっぽいメニューをつくる #C# - Qiita [C#/WPF]動的にタブを生成するタブコントロール #C# - Qiita Selector クラス (System.Windows.Controls.Primitives) | Microsoft Learn
関連 :
Grid DockPanel・StackPanel テンプレート データバインディング [C#]LINQ (Language Integrated Query)
目次 :

TabControl とは

画面上の同じスペースに複数の内容を表示するためのコントロール。
タブを選択することで表示する内容を切り替えられる。

基本的な例

以下は TabControl に3つのタブを作成する場合の例である。
図では「TabItem1」の内容が表示されているが、タブ「TabItem2」、「TabItem3」をクリックすると、それぞれのタブの内容が表示される。
各タブの内容は TabItem として定義し、TabItem の Header プロパティにタブの表題を指定する。
XAML
<TabControl> <TabItem Header="TabItem1"> <TextBlock Text="TabItem1 Content" /> </TabItem> <TabItem Header="TabItem2"> <TextBlock Text="TabItem2 Content" /> </TabItem> <TabItem Header="TabItem3"> <TextBlock Text="TabItem3 Content" /> </TabItem> </TabControl>
画面表示
画像

コレクションの表示

TabControl クラスは Selector を継承しているため、 ItemsSource プロパティにコレクションを設定することでコレクションの要素を各タブに関連付けられる。
これは ListBox や ComboBox と同様である。
Model(CS)
// コレクションの要素として用いる Person クラス public class Person { public string Name { get; set; } public int Age { get; set; } }
View(MainWindow.cs.xaml)
<!-- TabControl : "tabControl" --> <TabControl x:Name="tabControl"> <!-- ItemTemplate : タブの表題( Header )に関連 --> <TabControl.ItemTemplate> <DataTemplate> <!-- タブ表題を TextBlock として表示 --> <!-- TextBlock.Text を Person.Name にバインド --> <TextBlock Text="{Binding Name}" /> </DataTemplate> </TabControl.ItemTemplate> <!-- ContentTemplate : タブの内容( Content )に関連 --> <TabControl.ContentTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Content="名前" /> <!-- TextBlock.Text を Person.Name にバインド --> <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" /> <Label Grid.Row="1" Grid.Column="0" Content="年齢" /> <!-- TextBlock.Text を Person.Age にバインド --> <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Age}" /> </Grid> </DataTemplate> </TabControl.ContentTemplate> </TabControl>
ViewModel(MainWindow.cs)
public MainWindow() { InitializeComponent(); // コレクション source の初期化 var source = Enumerable.Range(1, 10) .Select(i => new Person { Name = "おおた" + i, Age = 20 + i }); // tabControl の ItemsSource にコレクション source を指定 this.tabControl.ItemsSource = source; }
画面表示
画像
解説
上記はコレクションを TabControl に関連付ける例である。
ここではテンプレートを使用し、ItemTemplate でタブの表題( Header )、ContentTemplate でタブの内容( Content )を指定する。
Person 型のコレクション source を TabControl の ItemsSource プロパティに代入すると、TabControl では source の要素ごとにタブを割り当てる。
( source の初期化時にLINQ( Select() )を使用している点に注意。)
TabControl.ItemsSource が割り当てられているため、XAML側ではデータバインディングにより値を参照できる。

タブの高さを揃える

通常、TabItem の高さは内容によって変化するため、タブを選択するたびに TabControl 全体の高さが変わってしまう。
Grid の機能を用いることで、高さの変化をある程度抑制できる。